<template>
    <view @click="goGroupDetail">
        <view class="group">
			<view class="info">
				<slot name="headImg"></slot>
				<view class="detail">
					<view class="groupName">
						<slot name="groupName"></slot>
					</view>
					<view class="tag">
						<view class="groupTag">
							<slot name="groupTag"></slot>
						</view>
					</view>
				</view>
			</view>
        </view>
    </view>
</template>

<script>
export default {
	emits:['goGroupDetail'],
    data() {
        return {
        }
    },
	methods:{
		goGroupDetail(){
			this.$emit('goGroupDetail')
		}
	}
}
</script>

<style>
.group {
	margin: 30rpx auto;
	position: relative;
	width: 90vw;
	height: 140rpx;
	border: 1rpx solid #ccc;
	border-left: 30rpx solid #8DC7DF;
	border-radius: 15px;
	overflow: hidden;
}

.info {
    position: absolute;
    width: 100%;
    height: 120rpx;
    bottom: 0;
}

.info .headImg {
    position: absolute;
    width: 105rpx;
    height: 105rpx;
    border-radius: 50%;
    left: 40rpx;
    top: 0;
    background-color: blue;
}

.info .detail {
    position: absolute;
    left: 170rpx;
    width: 50%;
    height: 100%;
    font-size: 30rpx;
}

.groupName {
    position: absolute;
    top: 10rpx;
    font-size: 30rpx;
}

.tag {
    position: absolute;
    bottom: 20rpx;
}

.groupTag {
    display: inline-block;
    padding: 0 16rpx;
    height: 48rpx;
    line-height: 48rpx;
    text-align: center;
    background-color: #8DC7DF;
    font-size: 22rpx;
    color:#fff ;
    border-radius: 20rpx;
}
</style>